<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单查询</title>
    <script type="application/javascript" src="/static/js/common.js"></script>
</head>
<body>
    <nav class="nav">
        <a class="button button-link left" onclick="history.back();">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-fanhui-"></use>
            </svg>返回
        </a>
        <a class="button button-link right" onclick="history.go(0);">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhuanfa-"></use>
            </svg>刷新
        </a>
        <h1 class="title">账单查询</h1>
    </nav>
    <header class='app-header'>
        <h1 class="app-title">账单查询</h1>
    </header>
    <div class="app-content">
        <form id="searchForm" class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">开始日期</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="dateBegin" type="text" name="timeHorizonBegin" th:value="${#dates.format(begin, 'yyyy-MM-dd')}">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">结束日期</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="dateEnd" type="text" name="timeHorizonEnd" th:value="${#dates.format(end, 'yyyy-MM-dd')}">
                </div>
            </div>
            <br/>
            <br/>
            <div class="weui-cells__tips">系统默认查询当周账单，请注意选择时间</div>
            <br/>
            <a href="javascript:;" class="weui-btn weui-btn_primary" id="search">查询</a>
            <a href="javascript:;" class="weui-btn weui-btn_default" id="creat-search">生成并查询</a>
            <a href="/bill/show-list?type=week" class="weui-btn weui-btn_plain-primary">历史查询</a>
        </form>
    </div>
    <script type="application/javascript">
        $("#dateBegin").calendar({dateFormat: "yyyy-mm-dd"});
        $("#dateEnd").calendar({dateFormat: "yyyy-mm-dd"});

        //查询
        APP.submitAction($("#search"), function (item) {
            const field = APP.getFormValue($("#searchForm"));
            var param = "?begin=" + field.timeHorizonBegin + "&end=" + field.timeHorizonEnd;
            APP.disabled($("#search"), false);
            location.href = "/bill/show-search"+param;
        });

        //创建并查询
        APP.submitAction($("#creat-search"), function (item) {
            const field = APP.getFormValue($("#searchForm"));
            var param = "?begin=" + field.timeHorizonBegin + "&end=" + field.timeHorizonEnd;
            $.confirm("确认查询并自动生成"+field.timeHorizonBegin+"到"+field.timeHorizonEnd+"的账单?", function () {
                APP.ajaxSubmit("/api/bill/creat-bill", {begin: field.timeHorizonBegin, end: field.timeHorizonEnd}, function (res) {
                    APP.ajaxRes(res, function () {
                        APP.disabled($("#creat-search"), false);
                        location.href = "/bill/show-search" + param;
                    });
                });
            }, function () {
                APP.disabled($("#creat-search"), false);
            });
        })

    </script>

</body>
</html>
